<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('资产统计')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content">

    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">全年</span>
                    <h5>资产</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">
                        <div class="form-control-static" th:text="${stat.amount}">
                        </div>
                    </h1>
                    <!--<div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>-->
                    <!--</div>-->
                    <small>总资产</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">全年</span>
                    <h5>资产</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">
                        <div class="form-control-static" th:text="${stat.total}">
                        </div>
                    </h1>
                    <!--<div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>-->
                    <!--</div>-->
                    <small>总数量</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">全部</span>
                    <h5>资产操作</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">
                        <div class="form-control-static" th:text="${stat.lendNum}"></div>
                    </h1>
                    <!--<div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>-->
                    <!--</div>-->
                    <small>领用数量</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">全部</span>
                    <h5>资产操作</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">
                        <div class="form-control-static" th:text="${stat.returnNum}"></div>
                    </h1>
                    <!--<div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i>-->
                    <!--</div>-->
                    <small>退回数量</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>资产操作</h5>
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-white active">天</button>
                            <button type="button" class="btn btn-xs btn-white">月</button>
                            <button type="button" class="btn btn-xs btn-white">年</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                            </div>
                        </div>
                        <!--<div class="col-sm-3">-->
                        <!--<ul class="stat-list">-->
                        <!--<li>-->
                        <!--<h2 class="no-margins">2,346</h2>-->
                        <!--<small>订单总数</small>-->
                        <!--<div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>-->
                        <!--</div>-->
                        <!--<div class="progress progress-mini">-->
                        <!--<div style="width: 48%;" class="progress-bar"></div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li>-->
                        <!--<h2 class="no-margins ">4,422</h2>-->
                        <!--<small>最近一个月订单</small>-->
                        <!--<div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>-->
                        <!--</div>-->
                        <!--<div class="progress progress-mini">-->
                        <!--<div style="width: 60%;" class="progress-bar"></div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li>-->
                        <!--<h2 class="no-margins ">9,180</h2>-->
                        <!--<small>最近一个月销售额</small>-->
                        <!--<div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>-->
                        <!--</div>-->
                        <!--<div class="progress progress-mini">-->
                        <!--<div style="width: 22%;" class="progress-bar"></div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--</ul>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
<!--<th:block th:include="include :: footer"/>-->
<th:block th:include="include :: sparkline-js"/>

<script th:inline="javascript">
    $(document).ready(function () {
        var  addData = [[${stat.dayOperateAddNum}]];
        var  reduceData = [[${stat.dayOperateReduceNum}]];
        var dataset = [
            {
                label: "入库数",
                data: addData,
                color: "#1ab394",
                bars: {
                    show: true,
                    align: "center",
                    barWidth: 24 * 60 * 60 * 600,
                    lineWidth: 0
                }

            },
            {
                label: "出库数",
                data: reduceData,
                yaxis: 2,
                color: "#464f88",
                lines: {
                    lineWidth: 1,
                    show: true,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.2
                        }, {
                            opacity: 0.2
                        }]
                    }
                },
                splines: {
                    show: false,
                    tension: 0.6,
                    lineWidth: 1,
                    fill: 0.9
                },
            }
        ];


        var options = {
            xaxis: {
                mode: "time",
                tickSize: [1, "day"],
                tickLength: 5,
                axisLabel: "Date",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 10,
                alignWithLabel:true,
                color: "#838383"
            },
            yaxes: [{
                position: "left",
                max: 1070,
                color: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 3
            }, {
                position: "right",
                clolor: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: ' Arial',
                axisLabelPadding: 67
            }
            ],
            legend: {
                noColumns: 1,
                labelBoxBorderColor: "#000000",
                position: "nw"
            },
            grid: {
                hoverable: false,
                borderWidth: 0,
                color: '#838383'
            }
        };

        function gd(year, month, day) {
            var date = new Date(year, month - 1, day).getTime();
            return date;
        }

        var previousPoint = null,
            previousLabel = null;

        $.plot($("#flot-dashboard-chart"), dataset, options);
    });
</script>
</body>
</html>
